<a name="CommonPlugin">
<!--CommonPluginBegin><XML><name>html网页公共</name><type>22</type><id>4</id></XML><XSL><xsl:template match="TMPL"></xsl></XSL><CommonPluginEnd-->
</a><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<body>
<script type="text/javascript" src="../js/jquery-mini.js"></script>
<div class="top">
<a name="CommonPlugin">
<!--CommonPluginBegin><XML><name>html网页公共</name><type>22</type><id>5</id></XML><XSL><xsl:template match="TMPL"></xsl></XSL><CommonPluginEnd-->
</a>
<link href="../css/move.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="../css/layout.css" />
<link rel="stylesheet" media="screen" type="text/css" href="../css/zoomimage.css" />
<script type="text/javascript" src="../js/jquery-1.3.2.min.codefans.net.js"></script>
<SCRIPT src="../js/base.js" type="text/javascript"></SCRIPT>
<SCRIPT src="../js/lib.js" type="text/javascript"></SCRIPT>
<SCRIPT src="../js/163css.js" type="text/javascript"></SCRIPT>
<!--<script src="../js/jquery.imageLens.js" type="text/javascript"></script>-->
<!--<script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>-->
<!--放大镜js-->
<!--<script type="text/javascript" src="../js/jqzoom.js"></script>-->
<!--菜单栏小图滚动-->
<script type="text/javascript">
        $(function () {
            Num = 0;
            _Width = 60;
            Page = 2;
            CurrentNum = 0;
            Pages = $(".ImgList .Img").size();
            //默认图片状态
            //LoadAjaxData($(".ImgList .Img img").eq(0).attr("rel"));
            $(".ImgList .Img").eq(0).addClass("cur");
            //点击切换大图片
            $(".ImgList .Img").each(function (i) {
                $(this).click(function () {
                    $(".ImgList .Img").removeClass("cur");
                    $(this).addClass("cur");
                    //LoadAjaxData($(".ImgList .Img img").eq(i).attr("rel"));
                    CurrentNum = i;
                    ChageBig(CurrentNum);
                });
            });
            //缩略图左右按钮点击切换
            $(".SmallCont .LeftBtn").click(function () {
                if (Num > 0) {
                    Num--;
                    $(".ImgList").animate({ left: "-" + Num * _Width + "px" }, 300);
                    ChageButton(Num);
                }
            });
            $(".SmallCont .RightBtn").click(function () {
                if (Num < Pages - Page) {
                    Num++;
                    $(".ImgList").animate({ left: "-" + Num * _Width + "px" }, 300);
                    ChageButton(Num);
                }
            });
            if (Pages <= Page) {
                $(".SmallCont .RightBtn img").attr("src", "../images/cp_xxr.jpg");
            }
            //
            function LoadAjaxData(_ImgUrl) {
                $.ajax({
                    "type": "get",
                    "url": "loadimg.aspx?ImgUrl=" + _ImgUrl + "&" + Math.random(),
                    "beforeSend": function () {
                        $(".HuanDeng").html("<div class='Loading'></div>");
                    },
                    "success": function (data) {
                        $(".HuanDeng").html(data);
                    },
                    error: function () { }
                })
            }
            //左右小按钮的状态
            function ChageButton(Num) {
                if (Num <= 0) {
                    $(".SmallCont .LeftBtn img").attr("src", "../images/cp_xxr.jpg");
                } else {
                    $(".SmallCont .LeftBtn img").attr("src", "../images/cp_xxr.jpg");
                }
                if (Num >= Pages - Page) {
                    $(".SmallCont .RightBtn img").attr("src", "../images/cp_xxl.jpg");
                } else {
                    $(".SmallCont .RightBtn img").attr("src", "../images/cp_xxl.jpg");
                }
            }
        });
</script>
<script type="text/javascript">
	$(function(){	
		$("#fangda").click(function(){
		$("#div1").hide();
		$("#div2").show();
		<!--圆形放大镜-->
		/*$("#img_03").imageLens({ imageSrc: $("#img_03").attr("src"),lensSize: 200 });*/
		<!--普通放大镜-->
			});
		})
</script>
<script  type="text/javascript">
	$(function(){
	var j=$("#imgList img").size();
	if(j>0){
		$(".small img").attr("src",$("#imgList img").eq(0).attr("src"));
		$(".big img").attr("src",$("#imgList img").eq(0).attr("src"));
		$(".pro_zz img").attr("src",$("#imgList img").eq(0).attr("src"));
			for(var i =0 ;i<j;i++)
			{
			 $("#ImgShow").append("<a href='#'><img src='"+ $("#imgList img").eq(i).attr("src")+"' width='33' height='34' class='xz1' /></a>");
			}
		}
	
		
		});
</script>
<!--点击我喜欢 +1-->
<script>
function btnLike(id) {
	   //  alert(id);
            $.ajax({
                type: 'post',
                url: "/IHandler/UpdateLookCounts.ashx?id="+id,
                dataType: "",
                data: { },
                cache: false,
                success: function (msg) {	
					$("#Like").text(msg);
                }
            });
        }

</script>
<!--放大镜-->
<script type="text/javascript">
$(function(){
	var mouseX = 0;		//鼠标移动的位置X
	var mouseY = 0;		//鼠标移动的位置Y
	var maxLeft = 0;	//最右边
	var maxTop = 0;		//最下边
	var markLeft = 0;	//放大镜移动的左部距离
	var markTop = 0;	//放大镜移动的顶部距离
	var perX = 0;	//移动的X百分比
	var perY = 0;	//移动的Y百分比
	var bigLeft = 0;	//大图要移动left的距离
	var bigTop = 0;		//大图要移动top的距离

	//改变放大镜的位置
	function updataMark($mark){
		//通过判断，让小框只能在小图区域中移动		
		if(markLeft<0){
			markLeft = 0;
		}else if(markLeft>maxLeft){
			markLeft = maxLeft;
		}
		
		
		if(markTop<0){
			markTop = 0;
		}else if(markTop>maxTop){
			markTop = maxTop;
		}
		
		//获取放大镜的移动比例，即这个小框在区域中移动的比例
		perX = markLeft/$(".small").outerWidth();
		perY = markTop/$(".small").outerHeight();
		
		bigLeft = -perX*$(".big").outerWidth();
		bigTop = -perY*$(".big").outerHeight();
		
		//设定小框的位置
		$mark.css({"left":markLeft,"top":markTop,"display":"block"});
	}
	
	//改变大图的位置
	function updataBig(){
		$(".big").css({"display":"block","left":bigLeft,"top":bigTop});
	}
	
	//鼠标移出时
	function cancle(){
		$(".big").css({"display":"none"});	
		$(".mark").css({"display":"none"});
	}
	
	//鼠标小图上移动时
	function imgMouseMove(event){
		
		var $this = $(this);
		var $mark = $(this).children(".mark");
  		
		//鼠标在小图的位置
		mouseX = event.pageX-$this.offset().left - $mark.outerWidth()/2;
		mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2;
		
		//最大值
		maxLeft =$this.width()- $mark.outerWidth();
		maxTop =$this.height()- $mark.outerHeight();
		markLeft = mouseX;
		markTop = mouseY;
		
		updataMark($mark);
		updataBig();
	}
	$(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);
})

</script>
<style type="text/css">
*{ margin:0px; padding:0px;}

.box{
	width:302px;
	height:403px;
	margin-top:10px;
	margin-left:20px;
	
}

.box .small{
	position:relative;
	text-align:center;
	}

.box .small .mark{
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	width:180px;
	height:240px;
	background:#FFFFFF;
	filter:alpha(opacity:50); 
	opacity:0.3;
	border:1px solid #333;
	display:none;
	}

.box .big{
	position:absolute;
	left:330px;
	top:0;
	display:none;
	}
	
.boxbig{
	position:absolute;
	left:328px;
	top:10px;;
	width:300px;
	height:400px;
	overflow:hidden;
	}


</style>
<div class="ff">
    <div class="flash">
         <div class="pro_ff">
             <div class="pro_mb wrapper">
                 <div class="pro_le">
                    <div class="pro_le_bt"><a name="Plugin">
<!--PluginBegin><XML><name>文章字段</name><type>4</type></XML><XSL><xsl:template match="TMPL/Article"><xsl:value-of select="chvTitle" disable-output-escaping="yes"/></xsl:template></XSL><PluginEnd-->
</a></div>
                    <div class="pro_le_mx">
                        <div class="cpmxbt"><span>产品明细</span></div>
                        <ul>
                       
                          <a name="Plugin">
<!--PluginBegin><XML><name>文章字段</name><type>4</type></XML><XSL><xsl:template match="TMPL/Article"><xsl:value-of select="txtContent" disable-output-escaping="yes"/></xsl:template></XSL><PluginEnd-->
</a>
                          
                        </ul>
                    </div>
                 </div>
                
                <div id="div1" >
                <script>
				$(document).ready(function (){	
					$(".img").css({width:(403/$('.img').height())*$('.img').width(),height:"403px",marginleft: (-((403/$('.img').height())*$('.img').width()-302)/2)});
				});
				</script>
                 <div class="pro_zz">
                 	<div style="width:302px;height:403px;overflow:hidden;margin:auto">
                      <img src="" class="img"/>
                      </div>
                      <a href="#"> <div class="fangda" id="fangda" >缩放/观看不同角度</div></a>
                 </div>
                 <div class="pro_rh">
                    <a style=" cursor:pointer" href="Javascript:;" onClick="btnLike(<a name="Plugin">
<!--PluginBegin><XML><name>文章字段</name><type>4</type></XML><XSL><xsl:template match="TMPL/Article"><xsl:value-of select="intSecArtID" disable-output-escaping="yes"/></xsl:template></XSL><PluginEnd-->
</a>)">  <div class="pro_rh_top" title="我喜欢" id="Like"><a name="Plugin">
<!--PluginBegin><XML><name>文章字段</name><type>4</type></XML><XSL><xsl:template match="TMPL/Article"><xsl:value-of select="intAccessCount" disable-output-escaping="yes"/></xsl:template></XSL><PluginEnd-->
</a></div></a>
                      <div class="cpxzbt"><span>此商品有6项供选择</span></div>
                      <div class="cpxz">
                      <div class="SmallCont">
        <div class="SmallBtn LeftBtn">
            <img src="../images/cp_xxr.jpg" /></div>
        <div class="SmallBtn RightBtn">
            <img src="../images/cp_xxl.jpg" /></div>
        <div class="SmallImg">
            <div class="ImgList">
                                         <a name="Plugin">
<!--PluginBegin><XML><name>文章所在栏目的文章列表</name><type>21</type></XML><XSL><xsl:template match="TMPL"><xsl:for-each select="Article">
         <div class="Img"><a href="{chvFullURL}"><img class="xz" src="{chvMainPic}" title="{chvTitle}" width="53" height="65" /></a></div>
 </xsl:for-each></xsl:template></XSL><PluginEnd-->
</a> 
            </div>
        </div>
    </div>
                      </div>
                 </div>
				 </div>
				 
				 <div id="div2" style="display:none;">
					 <div class="pro_zz1" >
                        <div class="box">
                            <div class="small">  
                               
                           		<span class="mark"></span>
                               <img src="" width="302" height="403"  />   
								
                            </div> 
                            <div class="boxbig">
                                <div class="big"><img src="" alt="" /></div>
                                
                            </div>           
                        </div>
                 </div>
                 <div class="pro_rh1">
                    <div class="guanbi" id="Close"><a href="#"><img src="../images/cp_19.png" width="13" height="13" /></a></div>
                    <div id="ImgShow"></div>
                   
                    </div>
				 
				 </div>
				 <div id="imgList" style="display:none">
				 	<a name="Plugin">
<!--PluginBegin><XML><name>文章字段</name><type>4</type></XML><XSL><xsl:template match="TMPL/Article"><xsl:value-of select="chvSummary" disable-output-escaping="yes"/></xsl:template></XSL><PluginEnd-->
</a>
				 </div>
             </div>
         </div>    
    </div>
</div>
<script type="text/javascript">
	$(function(){	
		$("#ImgShow img").mousemove(function(){
			$(".small img").attr("src",$(this).attr("src"));
			$(".big img").attr("src",$(this).attr("src"));
			});
			
			
		})
</script>
<script type="text/javascript">
$(function(){
	$("#Close").click(function(){
		$("#div1").show();
		$("#div2").hide();
		});	
	})
</script>

<a name="CommonPlugin">
<!--CommonPluginBegin><XML><name>html网页公共</name><type>22</type><id>6</id></XML><XSL><xsl:template match="TMPL"></xsl></XSL><CommonPluginEnd-->
</a>


